<template>
  <el-dialog
    :append-to-body="true"
    :title="title"
    :visible.sync="show"
    width="54%"
    top="20vh !important"
    :show-close="false"
    :before-close="handleClose"
    center
  >
    <el-form ref="queryForm" :model="data" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="24">
          <el-form-item
            :label="'请选择' + title"
            label-width="120px"
            prop="marketPostList"
          >
            <el-select
              v-model="select"
              placeholder="请选择部门人员"
              size="small"
              @change="selectChange"
            >
              <el-option
                v-for="dict in marketPostList"
                :key="dict.postId"
                :label="dict.postName"
                :value="dict.postName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="radio">
            <el-radio-group
              v-model="radio"
              class="groupRadio"
              @change="onRadioChange"
            >
              <el-radio
                v-for="(item, index) in radioData"
                :key="index"
                :label="item.userId"
                >{{ item.userName }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" class="pan-btn blue-btn" @click="submit"
            >确定</el-button
          >
          <el-button @click="close">取 消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { postName } from '@/api/system/user'
import { mapGetters } from 'vuex'

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      radio: undefined,
      select: '市场',
      data: {},
      params: {
        postname: '市场',
      },
      radioData: [],
      radioDatas: [],
    }
  },
  computed: {
    ...mapGetters('market', ['marketPostList']),
  },
  watch: {
    show: {
      handler(newVal) {
        if (newVal) {
          this.getUserListAll(this.params)
        }
      },
    },
  },
  methods: {
    async getUserListAll(name) {
      await postName(name).then((res) => {
        this.radioDatas = res.data
        this.radioData = res.data
      })
    },
    async getUserList(name) {
      await postName(name).then((res) => {
        this.radioData = res.data
      })
    },
    selectChange(e) {
      for (const value of this.marketPostList) {
        if (value.postName == e) {
          this.changeValue(e)
          break
        }
      }
    },
    changeValue(e) {
      this.params.postname = e
      this.getUserList(this.params)
    },
    close() {
      this.select = '市场'
      this.params.postname = '市场'
      this.radioData = this.radioDatas
      this.radio = null
      this.$emit('close', false)
    },
    submit() {
      if (this.radio) {
        const { userName } = this.radioData.filter((item) => {
          if (item.userId == this.radio) {
            return item.userName
          }
        })[0]
        const radio = {
          title: this.title,
          userName,
          userId: this.radio,
        }
        this.select = '市场'
        this.params.postname = '市场'
        this.radioData = this.radioDatas
        this.radio = null
        this.$emit('confirm', radio)
      } else {
        this.radio = null
        this.$emit('confirm', null)
      }
    },
    handleClose() {
      return
    },
    onRadioChange(e) {
      if (e) {
        this.radio = e
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.groupRadio {
  .el-radio {
    margin-bottom: 12px;
  }
}
</style>
